
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩色JSON格式化工具</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .rainbow-bg {
            background: linear-gradient(135deg, #f6d365 0%, #fda085 20%, #fbc2eb 40%, #a6c1ee 60%, #84fab0 80%);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }
        @keyframes gradient {
            0% {background-position: 0% 50%;}
            50% {background-position: 100% 50%;}
            100% {background-position: 0% 50%;}
        }
        .json-key { color: #ff79c6; }
        .json-string { color: #50fa7b; }
        .json-number { color: #bd93f9; }
        .json-boolean { color: #ffb86c; }
        .json-null { color: #ff5555; }
        .json-punctuation { color: #f8f8f2; }
    </style>
</head>
<body class="rainbow-bg min-h-screen py-12">
    <div class="container mx-auto px-4">
        <div class="text-center mb-10">
            <h1 class="text-4xl font-bold text-white drop-shadow-lg">彩色JSON格式化工具</h1>
            <p class="text-white text-opacity-90 mt-3">让JSON数据变得生动多彩</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div class="bg-white bg-opacity-90 p-6 rounded-xl shadow-2xl backdrop-blur-sm">
                <div class="flex justify-between items-center mb-5">
                    <h2 class="text-xl font-semibold text-purple-800">
                        <i class="fas fa-keyboard mr-2"></i>输入JSON
                    </h2>
                    <div class="flex space-x-3">
                        <button id="clear-btn" class="px-4 py-2 bg-gradient-to-r from-pink-500 to-orange-500 text-white rounded-lg hover:shadow-lg transition">
                            <i class="fas fa-trash-alt mr-1"></i>清空
                        </button>
                        <button id="example-btn" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-lg hover:shadow-lg transition">
                            <i class="fas fa-lightbulb mr-1"></i>示例
                        </button>
                    </div>
                </div>
                <textarea id="json-input" class="w-full h-64 p-4 border-2 border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-400 focus:border-purple-500 font-mono" placeholder='{"name":"示例JSON","colors":["红","橙","黄","绿","蓝","靛","紫"]}'></textarea>
                <button id="format-btn" class="mt-5 w-full py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-bold rounded-lg hover:from-purple-700 hover:to-indigo-700 transition transform hover:scale-[1.01]">
                    <i class="fas fa-magic mr-2"></i>格式化并着色
                </button>
            </div>

            <div class="bg-gray-900 bg-opacity-80 p-6 rounded-xl shadow-2xl backdrop-blur-sm">
                <div class="flex justify-between items-center mb-5">
                    <h2 class="text-xl font-semibold text-white">
                        <i class="fas fa-palette mr-2"></i>彩色输出
                    </h2>
                    <button id="copy-btn" class="px-4 py-2 bg-gradient-to-r from-green-500 to-teal-500 text-white rounded-lg hover:shadow-lg transition">
                        <i class="fas fa-copy mr-1"></i>复制
                    </button>
                </div>
                <pre id="json-output" class="h-64 p-4 bg-gray-800 rounded-lg overflow-auto text-gray-100 font-mono hidden"></pre>
                <div id="error-msg" class="h-64 p-4 bg-red-100 border-2 border-red-300 rounded-lg text-red-700 hidden"></div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const jsonInput = document.getElementById('json-input');
            const jsonOutput = document.getElementById('json-output');
            const errorMsg = document.getElementById('error-msg');
            const formatBtn = document.getElementById('format-btn');
            const copyBtn = document.getElementById('copy-btn');
            const clearBtn = document.getElementById('clear-btn');
            const exampleBtn = document.getElementById('example-btn');

            function syntaxHighlight(json) {
                json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                    let cls = 'json-number';
                    if (/^"/.test(match)) {
                        cls = /:$/.test(match) ? 'json-key' : 'json-string';
                    } else if (/true|false/.test(match)) {
                        cls = 'json-boolean';
                    } else if (/null/.test(match)) {
                        cls = 'json-null';
                    }
                    return '<span class="' + cls + '">' + match + '</span>';
                });
            }

            formatBtn.addEventListener('click', function() {
                try {
                    const jsonObj = JSON.parse(jsonInput.value);
                    const formattedJson = JSON.stringify(jsonObj, null, 4);
                    jsonOutput.innerHTML = syntaxHighlight(formattedJson);
                    jsonOutput.classList.remove('hidden');
                    errorMsg.classList.add('hidden');
                } catch (e) {
                    errorMsg.textContent = '错误: ' + e.message;
                    errorMsg.classList.remove('hidden');
                    jsonOutput.classList.add('hidden');
                }
            });

            copyBtn.addEventListener('click', function() {
                if (!jsonOutput.classList.contains('hidden')) {
                    navigator.clipboard.writeText(jsonOutput.textContent)
                        .then(() => {
                            const originalText = copyBtn.innerHTML;
                            copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i>已复制';
                            setTimeout(() => {
                                copyBtn.innerHTML = originalText;
                            }, 2000);
                        });
                }
            });

            clearBtn.addEventListener('click', function() {
                jsonInput.value = '';
                jsonOutput.textContent = '';
                jsonOutput.classList.add('hidden');
                errorMsg.classList.add('hidden');
            });

            exampleBtn.addEventListener('click', function() {
                const exampleJson = {
                    "appName": "彩色JSON工具",
                    "version": "1.0.0",
                    "features": ["语法高亮", "格式化", "错误检测", "复制功能"],
                    "colors": {
                        "primary": "#667eea",
                        "secondary": "#764ba2",
                        "success": "#48bb78",
                        "danger": "#f56565"
                    },
                    "active": true,
                    "settings": {
                        "darkMode": true,
                        "animation": true,
                        "fontSize": 16
                    },
                    "nullValue": null,
                    "rating": 4.5
                };
                jsonInput.value = JSON.stringify(exampleJson, null, 2);
            });
        });
    </script>
</body>
</html>
